<template>
  <div class="task-list">
    <div v-loading="loading" class="task-grid">
      <TaskCard
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @show-detail="showTaskDetail"
        @archive="handleArchive"
        @update="handleUpdate"
        @refresh="refreshTasks"
      />
    </div>
    <TaskDetailDialog
      v-model="detailDialogVisible"
      :task="currentTask"
      @deleted="refreshTasks"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSkillList } from '@/api/skill'
import TaskCard from './components/TaskCard.vue'
import TaskDetailDialog from './components/TaskDetailDialog.vue'

const tasks = ref([])
const loading = ref(false)
const detailDialogVisible = ref(false)
const currentTask = ref(null)

// 获取任务列表
const refreshTasks = async () => {
  try {
    loading.value = true
    const response = await getSkillList()
    tasks.value = response.data
  } catch (error) {
    console.error('获取任务列表失败:', error)
    ElMessage.error('获取任务列表失败')
  } finally {
    loading.value = false
  }
}

// 显示任务详情
const showTaskDetail = (task) => {
  currentTask.value = task
  detailDialogVisible.value = true
}

// 处理任务归档
const handleArchive = async (task) => {
  try {
    await updateSkill({
      id: task.id,
      isCompleted: 2,
      completedTime: new Date().toISOString()
    })
    ElMessage.success('任务已归档')
    refreshTasks()
  } catch (error) {
    console.error('归档任务失败:', error)
    ElMessage.error('归档任务失败')
  }
}

// 处理任务更新
const handleUpdate = () => {
  refreshTasks()
}

// 组件挂载时获取任务列表
onMounted(() => {
  refreshTasks()
})
</script>

<style scoped>
.task-list {
  padding: 24px;
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .task-list {
    padding: 16px;
  }

  .task-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style> 